<template>
	<view class="body">
		<view class="stu-payment">
			<view class="tit">缴费科目：</view>
			<view class="box">
				<view class="tables bc-w">
					<view class="tr flex">
						<view class="td txt-c">类型</view>
						<view class="td">名称</view>
						<view class="td">应缴</view>
						<view class="td txt-c">
							<checkbox color="#f06e6c" v-model="radio1" @click="setAll"></checkbox>
						</view>
					</view>
					<checkbox-group class="tr flex" v-for="(item,index) in list" :key="index" @change="setRadio">
						<view class="td txt-c">{{item.name}}</view>
						<view class="td">{{item.text}}</view>
						<view class="td">{{item.money}}</view>
						<view class="td txt-c">
							<checkbox color="#f06e6c" :value="index" :checked='item.checked'></checkbox>
						</view>
					</checkbox-group>
				</view>
			</view>
			<view class="tit">优惠/抵扣（智米一经使用，不作退回）：</view>
			<view class="deduction bc-w mb20">
				<!-- <view class="item between">
					<view class="lf">奖学金</view>
					<view class="rt fc2"><text style="color: rgb(68, 68, 68);">无可用</text><i class="icons i-arr-r"></i>
					</view>
				</view> -->
				<view class="item integral between">
					<view class="lf">
						<view class="name">智米</view>
					</view>
					<view class="rt"><text class="fc2 sub">余额：0智米，满10000智米可用</text>
					</view>
				</view>
			</view>
			<view class="money bc-w">
				<view class="row clearfix">
					<view class="name fl">总计应缴：</view>
					<view class="fr">599.00</view>
				</view>
				<view class="row clearfix">
					<view class="name fl">优惠/抵扣：</view>
					<view class="val fr">-0.00</view>
				</view>
			</view>
			<view class="tip-box"><text>*</text> <text>学费及优惠事宜，请以官方通知为准，个人承诺无效。</text></view>
		</view>
		<view class="footer">
			<view class="wrap">
				<view class="inner clearfix">
					<view class="fl text-box">
						<text>实付款：</text>
						<text class="amount">¥ <text class="num">599.00</text></text>
					</view>
					<view class="fr btn-box flex">
						<button class="btn1 btn2" @click="weixinPay">微信支付</button>
						<button class="btn1">支付宝支付</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '考前费用',
					text: '考前辅导费',
					money: 499,
					checked: false
				}],
				order_id: 0, 
				order_no: '', 
				pay_price: 0
			}
		},
		onLoad(options) {
			const {order_id, order_no, pay_price} = options;
			console.log(options);
			this.order_id = order_id
			this.order_no = order_no
			this.pay_price = pay_price
		},
		methods: {
			weixinPay() {
				wx.request({
					method:"POST",
					url: getApp().globalData.apiBaseUri +'/xiluedu/pay/pay',
					header: {
						'http-token': '2f5fb263-a5bf-492a-9eed-577801bc0416' // 默认值
					},
					data: {
					  order_id: this.order_id,
					  order_no: this.order_no,
					  pay_type: '1',
					  platform: "wxmini",
					  type:'readOrder'
					},
					success: (res) => {
						const {statusCode, data, errMsg} = res;
						if(statusCode !== 200) {
							console.error('后台支付服务网络异常' +  errMsg);
							return;
						}
						const {code, msg, data:resData} = data; 
						if(code !== 1) {
							console.error('后台支付请求接口处理错误',msg);
							return;
						}
						console.log('后台支付',resData)
						const { appId, nonceStr, package:prePackage, paySign, signType, timeStamp } = resData
						wx.requestPayment({
							timeStamp: timeStamp,
							nonceStr: nonceStr,
							package: prePackage,
							signType: signType,
							paySign: paySign,
							success:function(res){
								console.log('支付success', res);
							},
							fail:function(e){
								console.error('支付fail', e)
							},
							complete:function(res){
								console.log('支付complete完成', res)
							}
						})
					},
					fail: (e) => {
						console.error(e);
					}
				})
			},
			
			setAll() {
				if(this.list.every(item=>item.checked)){
					this.list.map(item => item.checked = false)
				}else{
					this.list.map(item => item.checked = true)
				}
			},
			setRadio(e) {
				this.list.map(item => item.checked = false)
				this.list.map((item, index) => e.detail.value.map(it => it == index ? item.checked = true : null))
			}
		}
	}
</script>

<style scoped lang="scss">
	.footer {
		height: 120rpx;

		.wrap {
			bottom: 0;
			left: 0;
			position: fixed;
			right: 0;
			z-index: 2000;

			.inner {
				background-color: #fff;
				height: 120rpx;
				margin: 0 auto;
				width: 100%;
				overflow: hidden;
				padding: 10rpx 20rpx;
				position: relative;
				box-sizing: border-box;

				.text-box {
					display: flex;
					align-items: center;
					flex-direction: column;

					.amount {
						color: #f06e6c;
						font-weight: bold;
						font-size: 36rpx;
						margin-top: 5rpx;
					}
				}

				.btn-box {
					&::after {
						background-color: #fff;
						content: "";
						height: 60rpx;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
					}
				}

				.btn1 {
					background-color: #f26662;
					flex: 1;
					background-image: linear-gradient(to bottom right, #f86f6b, #ef425c);
					border: none;
					border-radius: 0 40rpx 40rpx 0;
					color: #fff;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 0;
				}

				.btn2 {
					border-radius: 40rpx 0 0 40rpx;
					position: relative;
				}
			}
		}
	}

	.money {
		padding: 20rpx;

		.row {
			padding: 20rpx;

			.val {
				color: red
			}
		}
	}

	.tip-box {
		font-size: 28rpx;
		padding: 20rpx;
	}

	.deduction {
		padding: 20rpx;

		.item {
			padding: 20rpx 0;
		}
	}

	.stu-payment {
		padding: 20rpx;

		.box {
			border-radius: 10rpx;

			.tr {
				text-align: left;
				border-bottom: 1px solid #eee;

				.td {
					padding: 20rpx 20rpx;
					box-sizing: border-box;
					position: relative;
					vertical-align: middle;
					border-right: 1px solid #eee;

					&:nth-child(1) {
						width: 25%;
					}

					&:nth-child(2) {
						width: 42%;
					}

					&:nth-child(3) {
						width: 25%;
					}

					&:nth-child(4) {
						width: 18%;
					}
				}
			}
		}

		.tit {
			color: #746a6a;
			font-size: 28rpx;
			padding: 20rpx;
		}
	}

	.tables {
		border: 1px solid #edebeb;
		color: rgba(23, 6, 6, .8);
		font-size: 28rpx;
		position: relative;
		width: 100%;
		background-color: #fff;
	}
</style>